<template>
  <div>
    <!-- 1、插值 -->

    <!-- 文本 -->
    <p>{{msg}}</p>

    <!-- 原始HTML -->
    <p>using mustaches: {{rawHtml}}</p>
    <p>using v-html directive: <span v-html="rawHtml">123</span></p>

    <!-- Attribute -->
    <div v-bind:id="dynamicId">dynamicId</div>

    <!-- 使用JS表达式 -->
    <p>{{ num + 1 }}</p>
    <p>{{ b ? 'Yes' : 'NO' }}</p>
    <p>{{ msg.split('').reverse().join('')}}</p>

    <!-- 不能是语句，模板表达式被放在沙盒中，只能访问全局变量的一个白名单，如Math、Date等 -->
    <!-- https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9 -->
    <!-- <p>{{ var a = 1 }}</p> -->
    <!-- <p>{{ if (1) return 1 }}</p> -->

    <!-- 2、指令 -->
    <!-- 指令是带有 `v-` 前缀的特殊 attribute，指令attribute的值预期是单个JavaScript表达式（v-for例外） -->
    <!-- 指令的职责是，当表达式的值变化时，将其产生的连带影响，响应式地作用于DOM -->
    <p v-if="show">v-if指令</p>

    <!-- 参数 -->
    <!-- 指令能够接收一个参数，在指令之后以冒号表示 -->
    <p><a v-bind:[attrName]="url">百度</a></p>
    <p v-on:click="clickHandler">Click me!</p>

    <!-- 修饰符 -->
    <!-- 修饰符用于指出一个指令应该以特殊方式绑定 -->
    <!-- 例如 .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->
    <a v-bind:href="url" v-on:click.prevent="onSubmit">url</a>

    <!-- 3、缩写 -->
    <!-- v-bind:attr => :attr -->
    <!-- v-on:click => @click -->
    <p><a :[attrName]="url">百度-缩写</a></p>
    <p @click="clickHandler">Click me!缩写</p>

  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue',
      rawHtml: '<span style="color:red;">China</span>',
      dynamicId: 1,
      num: 0,
      b: true,
      show: false,
      attrName: 'href',
      url: 'https://www.baidu.com/'
    }
  },
  mounted() {
    setTimeout(() => {
      this.msg += '...';
      this.dynamicId = 2;
      this.show = true;
    }, 1500)
  },
  methods: {
    clickHandler() {
      console.log('clicked');
    },
    onSubmit() {
      console.log('submit');
    }
  }
}
</script>